<template>
  <div class="profile">
    <!-- 导航条 -->
    <van-nav-bar left-arrow title="编辑资料" @click-left="$router.back()" />

    <!-- 编辑区 -->
    <van-cell-group>
      <input ref="filephoto" type="file" hidden @change="updatePhoto">
      <van-cell is-link title="头像" center @click="$refs.filephoto.click()">
        <van-image
          slot="default"
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          :src="user.photo"
          round
        />
      </van-cell>

      <van-cell is-link title="名称" :value="user.name" @click="clickShowName" />
      <van-cell is-link title="性别" :value="user.gender===0?'男':'女'" @click="cliskShowGender" />
      <van-cell is-link title="生日" :value="user.birthday" @click="clickShowBirthday" />
    </van-cell-group>
    <!-- 修改姓名弹框 -->
    <van-dialog v-model="showName" title="修改姓名" show-cancel-button @confirm="saveName">
      <van-field v-model.trim="newName" placeholder="请输入姓名" />
    </van-dialog>
    <!-- 修改性别弹出层 -->
    <van-popup v-model="showGender" position="bottom" :style="{ height: '30%' }">
      <van-nav-bar title="修改性别" left-text="取消" @click-left="showGender=false" />
      <van-cell title="男" is-link :class="{genderActive:user.gender===0}" @click="saveGender(0)" />
      <van-cell title="女" is-link :class="{genderActive:user.gender===1}" @click="saveGender(1)" />
    </van-popup>
    <!-- 修改日期 -->
    <van-popup v-model="showBirthday" position="bottom" :style="{ height: '50%' }">
      <van-datetime-picker
        v-model="currentDate"
        visible-item-count="6"
        item-height="60"
        type="date"
        title="修改日期"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="updateBirthday"
        @cancel="showBirthday=false"
      />
    </van-popup>

  </div>
</template>

<script>
import { reqProfileInfo, reqUpdatePhoto, reqUpdateName } from '@/api/user'
import dayjs from 'dayjs'
export default {
  name: 'UserProfile',
  data() {
    return {
      // 控制弹层
      showName: false,
      showGender: false,
      showBirthday: false,
      // 当前用户的信息
      user: {},
      newName: '',
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      currentDate: ''
    }
  },
  created() {
    this.profileInfo()
  },
  methods: {
    async profileInfo() {
      const { data } = await reqProfileInfo()
      console.log(data)
      this.user = data
    },
    // 上传头像
    async updatePhoto() {
      try {
        const file = this.$refs.filephoto.files[0]
        if (!file) return
        this.$toast.loading({
          message: '上传中',
          forbidClick: true,
          overlay: true
        })
        const formData = new FormData()
        formData.append('photo', file)
        const { data } = await reqUpdatePhoto(formData)
        console.log(data)
        this.user.photo = data.photo
        this.$toast.success('上传成功')
      } catch {
        this.$toast.fail('上传失败')
      }
    },
    // 编辑姓名
    clickShowName() {
      this.showName = true
      this.newName = this.user.name
    },
    async saveName() {
      try {
        if (this.newName === '') return
        if (this.user.name === this.newName) return
        if (this.newName.length > 7) {
          this.$toast.fail('姓名最大长度不能超过7')
          return
        }
        const res = await reqUpdateName({
          name: this.newName
        })
        console.log(res)
        this.user.name = this.newName
      } catch {
        this.$toast.fail('修改姓名失败')
      }
    },
    cliskShowGender() {
      this.showGender = true
    },
    // 修改性别
    async saveGender(gender) {
      try {
        const res = await reqUpdateName(gender)
        console.log(res)
        this.user.gender = gender
        this.showGender = false
        this.$toast.success('修改性别成功')
      } catch {
        this.$toast.fail('修改性别失败')
        this.showGender = false
      }
    },
    // 修改日期
    clickShowBirthday() {
      this.showBirthday = true
      this.currentDate = new Date(this.user.birthday)
    },
    async updateBirthday() {
      try {
        const birthday = dayjs(this.currentDate).format('YYYY-MM-DD')
        await reqUpdateName({
          birthday
        })
        this.user.birthday = birthday
        this.showBirthday = false
        this.$toast.success('修改日期成功')
      } catch {
        this.$toast.fail('修改日期失败')
        this.showBirthday = false
      }
    }
  }

}
</script>

<style lang="scss">
.profile {

      .van-nav-bar__text{
    color: #fff !important;
    }
  .genderActive{
    background-color: rgb(197, 197, 197) !important;
  }
}

</style>
